Ön Uç MediaStream Kaydı: Tarayıcı Tabanlı Medya Yakalama

Ses ve videoyu doğrudan bir web tarayıcısı içinde yakalama yeteneği, web uygulama geliştirmede devrim yarattı. MediaRecorder API'sinden yararlanan ön uç MediaStream kaydı, karmaşık sunucu tarafı işlemlere dayanmadan bu işlevselliği uygulamak için güçlü ve verimli bir yol sağlar. Bu yaklaşım, özellikle çevrimiçi toplantılar, video düzenleme araçları ve etkileşimli eğitimler gibi uygulamalarda gerçek zamanlı etkileşime, azaltılmış gecikmeye ve gelişmiş kullanıcı deneyimlerine olanak tanır.

MediaStream API'sini Anlamak

Tarayıcı tabanlı medya yakalamanın kalbinde MediaStream API'si yatar. Bir MediaStream, ses veya video kanalları gibi bir medya veri akışını temsil eder. Bir MediaStream'e erişmek için genellikle getUserMedia() yöntemini kullanırsınız.

getUserMedia() yöntemi, kullanıcıdan mikrofonlarına ve/veya kameralarına erişim izni ister. Kullanıcı izin verirse bir MediaStream nesnesiyle çözümlenen bir Promise döndürür veya kullanıcı izni reddederse ya da erişim mevcut değilse bir hatayla reddeder.

Örnek: Kamera Erişimi Talep Etme

İşte kullanıcının kamerasına erişim talep etmenin temel bir örneği:

            
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // Stream is available, do something with it
    console.log("Camera access granted!");
  })
  .catch(function(error) {
    console.error("Error accessing camera: ", error);
  });

            

              
                Copy
              
            
          

Açıklama:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): Bu satır, kameraya (video: true) erişim talep eder ve sesi (audio: false) açıkça devre dışı bırakır. Bu seçenekleri hem ses hem de video veya yalnızca ses talep edecek şekilde ayarlayabilirsiniz.
• .then(function(stream) { ... }): Bu blok, kullanıcı izin verirse çalıştırılır. stream değişkeni, MediaStream nesnesini tutar.
• .catch(function(error) { ... }): Bu blok, kullanıcının izni reddetmesi gibi bir hata olması durumunda çalıştırılır. İyi bir kullanıcı deneyimi sağlamak için hataları zarif bir şekilde ele almak çok önemlidir.

getUserMedia() için Yapılandırma Seçenekleri

getUserMedia() yöntemi, medya akışının istenen özelliklerini belirtmenize olanak tanıyan isteğe bağlı bir kısıtlama nesnesi kabul eder. Bu, aşağıdaki gibi seçenekleri içerir:

• video: Video talep etmek için Boolean (true/false) veya daha spesifik video kısıtlamaları (ör. çözünürlük, kare hızı) için bir nesne.
• audio: Ses talep etmek için Boolean (true/false) veya daha spesifik ses kısıtlamaları (ör. yankı iptali, gürültü bastırma) için bir nesne.
• width: Video akışının istenen genişliği.
• height: Video akışının istenen yüksekliği.
• frameRate: Video akışının istenen kare hızı.

Örnek: Belirli Kamera Çözünürlüğü Talep Etme

            
navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 }
  },
  audio: true
})
.then(function(stream) {
  // Stream is available
})
.catch(function(error) {
  // Handle errors
});

            

              
                Copy
              
            
          

Bu örnekte, 640 ile 1920 piksel arasında bir genişliğe (ideal olarak 1280) ve 480 ile 1080 piksel arasında bir yüksekliğe (ideal olarak 720) sahip bir video akışı talep ediyoruz. Ayrıca ses de talep ediyoruz.

MediaRecorder API'sine Giriş

Bir MediaStream'e sahip olduğunuzda, medya verilerini kaydetmek için MediaRecorder API'sini kullanabilirsiniz. MediaRecorder API, kaydı başlatma, durdurma, duraklatma ve devam ettirme yöntemlerinin yanı sıra kaydedilen verilere erişim için yöntemler sağlar.

Bir MediaRecorder Örneği Oluşturma

Bir MediaRecorder örneği oluşturmak için, MediaStream nesnesini MediaRecorder yapıcısına geçirirsiniz:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

Ayrıca, kaydedilen veriler için istenen MIME türü gibi ek seçenekleri yapıcıda belirtebilirsiniz:

            
const options = { mimeType: 'video/webm;codecs=vp9' };
const mediaRecorder = new MediaRecorder(stream, options);

            

              
                Copy
              
            
          

Desteklenen MIME Türleri:

Mevcut MIME türleri, tarayıcıya ve desteklediği kodeklere bağlıdır. Yaygın MIME türleri şunları içerir:

• video/webm;codecs=vp9
• video/webm;codecs=vp8
• video/mp4;codecs=avc1
• audio/webm;codecs=opus
• audio/ogg;codecs=vorbis

Belirli bir MIME türünün tarayıcı tarafından desteklenip desteklenmediğini kontrol etmek için MediaRecorder.isTypeSupported() yöntemini kullanabilirsiniz:

            
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
  console.log('video/webm;codecs=vp9 is supported');
} else {
  console.log('video/webm;codecs=vp9 is not supported');
}

            

              
                Copy
              
            
          

MediaRecorder ile Veri Kaydetme

MediaRecorder API'si, kayıt sürecini izlemek için dinleyebileceğiniz birkaç olay sunar:

• dataavailable: Bu olay, veriler kaydedilmeye hazır olduğunda tetiklenir.
• start: Bu olay, kayıt başladığında tetiklenir.
• stop: Bu olay, kayıt durduğunda tetiklenir.
• pause: Bu olay, kayıt duraklatıldığında tetiklenir.
• resume: Bu olay, kayıt devam ettirildiğinde tetiklenir.
• error: Bu olay, kayıt sırasında bir hata oluşursa tetiklenir.

En önemli olay dataavailable'dır. Bu olay, kaydedilen verileri içeren bir Blob nesnesi sağlar. Bu Blob nesnelerini biriktirebilir ve kayıt tamamlandığında bunları tek bir Blob'da birleştirebilirsiniz.

Örnek: Video Kaydetme ve Saklama

            
let recordedChunks = [];

mediaRecorder.ondataavailable = function(event) {
  console.log('data-available: ', event.data.size);
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

mediaRecorder.onstop = function() {
  console.log('Recording stopped!');
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);
};

mediaRecorder.start();
console.log("Recording started!");

// To stop recording:
// mediaRecorder.stop();

            

              
                Copy
              
            
          

Açıklama:

• let recordedChunks = [];: Kaydedilen veri parçalarını saklamak için bir dizi.
• mediaRecorder.ondataavailable = function(event) { ... }: Bu işlev, yeni veri mevcut olduğunda çağrılır. Veriyi recordedChunks dizisine ekler.
• mediaRecorder.onstop = function() { ... }: Bu işlev, kayıt durduğunda çağrılır. Birikmiş parçalardan bir Blob oluşturur, Blob için bir URL oluşturur, bir indirme bağlantısı oluşturur ve indirmeyi tetikler. Ayrıca kısa bir gecikmeden sonra oluşturulan URL nesnesini temizler.
• mediaRecorder.start();: Bu, kayıt işlemini başlatır.
• mediaRecorder.stop();: Kaydı durdurmak için bunu çağırın.

Kayıt Sürecini Kontrol Etme

MediaRecorder API'si kayıt sürecini kontrol etmek için yöntemler sağlar:

• start(timeslice): Kaydı başlatır. İsteğe bağlı timeslice argümanı, dataavailable olayının hangi aralıkta (milisaniye cinsinden) tetiklenmesi gerektiğini belirtir. Eğer timeslice sağlanmazsa, dataavailable olayı yalnızca kayıt durdurulduğunda tetiklenir.
• stop(): Kaydı durdurur.
• pause(): Kaydı duraklatır.
• resume(): Kaydı devam ettirir.
• requestData(): dataavailable olayını manuel olarak tetikler.

Tarayıcı Uyumluluğu ve Polyfill'ler

MediaStream ve MediaRecorder API'leri modern tarayıcılarda geniş çapta desteklenmektedir. Ancak, eski tarayıcılar bu API'leri doğal olarak desteklemeyebilir. Eski tarayıcıları desteklemeniz gerekiyorsa, gerekli işlevselliği sağlamak için polyfill'ler kullanabilirsiniz.

Mevcut birkaç polyfill şunları içerir:

• adapter.js: Bu polyfill, getUserMedia() dahil olmak üzere WebRTC API'leri için tarayıcılar arası uyumluluk sağlar.
• recorderjs: Doğal olarak desteklemeyen tarayıcılar için MediaRecorder işlevselliği sağlayan bir JavaScript kütüphanesi.

Pratik Uygulamalar ve Kullanım Alanları

Ön uç MediaStream kaydı, web uygulaması geliştirme için çok çeşitli olasılıklar sunar. İşte bazı pratik uygulamalar ve kullanım alanları:

• Çevrimiçi Toplantılar ve Video Konferans: Çevrimiçi toplantılar ve video konferanslar için ses ve video akışlarını gerçek zamanlı olarak yakalayın ve iletin.
• Video Düzenleme Araçları: Kullanıcıların doğrudan tarayıcıda video içeriği kaydetmesine ve düzenlemesine olanak tanıyın.
• Etkileşimli Eğitimler ve Gösterimler: Kullanıcı etkileşimlerini yakalayan ve kişiselleştirilmiş geri bildirim sağlayan etkileşimli eğitimler ve gösterimler oluşturun.
• Ses Kayıt Uygulamaları: Not alma, sesli notlar ve ses düzenleme için ses kayıt uygulamaları oluşturun.
• Gözetim Sistemleri ve Güvenlik Kameraları: Video akışlarını yakalayan ve kaydeden tarayıcı tabanlı gözetim sistemleri ve güvenlik kameraları uygulayın.
• Erişilebilirlik Araçları: Konuşmayı kaydedip gerçek zamanlı olarak metne dönüştürebilen veya daha sonra incelenmek üzere ekran etkinliğini kaydedebilen araçlar geliştirin.

Örnek: Basit Bir Video Kayıt Uygulaması Uygulama

İşte tartışılan kavramları HTML, CSS ve JavaScript kullanarak temel bir video kayıt uygulamasına nasıl entegre edebileceğinize dair basitleştirilmiş bir örnek:

HTML (index.html):

            



  
  


  
Browser Video Recorder
  

  Record
  Stop
  



            

              
                Copy
              
            
          

CSS (style.css):

            
body {
  font-family: sans-serif;
  text-align: center;
}

video {
  width: 640px;
  height: 480px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
}

            

              
                Copy
              
            
          

JavaScript (script.js):

            
const preview = document.getElementById('preview');
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');

let mediaRecorder;
let recordedChunks = [];

recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    preview.srcObject = stream;

    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.onstop = handleStop;

    mediaRecorder.start();

    recordButton.disabled = true;
    stopButton.disabled = false;

  } catch (err) {
    console.error("Error accessing media devices.", err);
  }
}

function handleDataAvailable(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
}

function stopRecording() {
  mediaRecorder.stop();

  recordButton.disabled = false;
  stopButton.disabled = true;

  //Stop all video streams
  preview.srcObject.getVideoTracks().forEach(track => track.stop());
}

function handleStop() {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);

  recordedChunks = []; // Reset array for the next recording
}

            

              
                Copy
              
            
          

Bu örnek, videoyu doğrudan bir tarayıcı içinde yakalama, görüntüleme, kaydetme ve indirme temel prensiplerini göstermektedir. İşlevselliği artırmak için hata yönetimi, farklı kodek seçenekleri veya kullanıcı tarafından ayarlanabilir kayıt kaliteleri eklemeyi düşünün.

Güvenlik Hususları

MediaStream kaydı ile çalışırken, güvenlik hususlarının farkında olmak çok önemlidir:

• Kullanıcı İzinleri: Mikrofona veya kameraya erişmeden önce daima kullanıcı izni isteyin. Bu cihazlara neden erişmeniz gerektiğini açıkça belirtin.
• HTTPS: Medya akışının şifrelendiğinden ve gizli dinlemelerden korunduğundan emin olmak için HTTPS kullanın. getUserMedia() API'si genellikle güvenli bir bağlam (HTTPS) gerektirir.
• Veri Depolama: Kaydedilen verileri saklıyorsanız, güvenli bir şekilde saklandığından ve yetkisiz erişime karşı korunduğundan emin olun. Şifreleme ve erişim kontrol mekanizmaları kullanmayı düşünün. Kullanıcılarınız ve onların konumlarıyla ilgili veri gizliliği düzenlemelerine (ör. GDPR, CCPA) uyun.
• Gizlilik: Kaydedilen verileri nasıl kullandığınız konusunda şeffaf olun. Kullanıcılara verileri üzerinde kontrol ve silme yeteneği sağlayın.
• Kötü Amaçlı Kod: Kullanıcı tarafından oluşturulan içeriği işlerken dikkatli olun, çünkü kötü amaçlı kod içerebilir. Siteler arası komut dosyası çalıştırma (XSS) saldırılarını önlemek için herhangi bir kullanıcı girdisini temizleyin.

Performans Optimizasyonu

MediaStream kaydı kullanırken optimum performans sağlamak için aşağıdakileri göz önünde bulundurun:

• MIME Türü Seçimi: Tarayıcı tarafından desteklenen ve iyi sıkıştırma sağlayan bir MIME türü seçin.
• Timeslice Aralığı: Veri kullanılabilirliği ve performansı dengelemek için timeslice aralığını ayarlayın. Daha küçük bir timeslice aralığı daha sık dataavailable olaylarına neden olur, ancak aynı zamanda ek yükü de artırabilir.
• Veri İşleme: Bellek sızıntılarını ve performans darboğazlarını önlemek için kaydedilen verileri verimli bir şekilde işleyin. Büyük miktarda veriyi işlemek için arabelleğe alma ve akış gibi teknikleri kullanın.
• Kullanıcı Arayüzü: Kullanıcıya kayıt süreci hakkında net geri bildirim sağlayan bir kullanıcı arayüzü tasarlayın. Bir kayıt göstergesi görüntüleyin ve kaydı duraklatma, devam ettirme ve durdurma için kontroller sağlayın.

Sonuç

Ön uç MediaStream kaydı, web geliştiricilerinin doğrudan tarayıcı içinde zengin ve etkileşimli medya deneyimleri oluşturmasını sağlar. MediaStream ve MediaRecorder API'lerini anlayarak, geliştiriciler çevrimiçi toplantılardan ve video düzenleme araçlarından etkileşimli eğitimlere ve gözetim sistemlerine kadar geniş bir uygulama yelpazesi oluşturabilirler. Güvenlik ve performans hususlarına dikkat ederek, web uygulamalarınızın işlevselliğini ve etkileşimini artıran sağlam ve kullanıcı dostu medya kayıt çözümleri oluşturabilirsiniz.